<template>
  <!-- 换肤 -->
  <el-tooltip effect="dark" content="换肤" placement="bottom">
    <el-color-picker
      popper-class="theme-setting"
      v-model="theme"
      :predefine="predefineThemes"
      size="small"
    />
  </el-tooltip>
</template>

<script>
// 获取element的样式
const elementStyleContent = require('!css-loader!element-ui/lib/theme-chalk/index.css')
  .default[0][1]

export default {
  data() {
    return {
      theme: '',
      predefineThemes: [
        '#409eff',
        '#1cc09d',
        '#ffa69e',
        '#ff4879',
        '#373737',
        '#5b5bea',
        '#FF8822',
        '#757575',
        '#5FC3D7',
        '#ffd166'
      ],
      defaultStyle: elementStyleContent,
      defaultColors: []
    }
  },
  watch: {
    theme(newTheme) {
      this.updateElementTheme(newTheme)
      this.updateCustomTheme(newTheme)
      this.$store.commit('SET_THEME', newTheme)
    }
  },
  created() {
    this.defaultColors = this.getColors('409eff')
    // 生成的颜色系列：["409eff", "64,158,255", "53a8ff", "66b1ff", "79bbff", "8cc5ff", "a0cfff", "b3d8ff", "c6e2ff", "d9ecff", "ecf5ff", "3a8ee6"]
    this.theme = this.$store.getters.theme
  },
  mounted() {
    this.createStyleElement('elementTheme')
  },
  methods: {
    createStyleElement(id) {
      if (document.getElementById(id)) return
      const styleElem = document.createElement('style')
      styleElem.setAttribute('id', id)
      document.head.appendChild(styleElem)
    },
    // 由基础颜色值生成一系列颜色值
    getColors(theme) {
      // 实现scss的mix函数，主题色与#fff进行混合。与白色混合其实就是改变透明度。
      // mix(#fff, #409eff, 90%)和 rgba(64,158,255,0.1); 它们的效果是一样的

      const tintColor = (color, tint) => {
        let red = parseInt(color.slice(0, 2), 16)
        let green = parseInt(color.slice(2, 4), 16)
        let blue = parseInt(color.slice(4, 6), 16)
        // 有些背景需要设置透明度，用到了rgba颜色值。
        if (tint === 0) {
          return [red, green, blue].join(',')
          //如果是未经压缩的css文件，或scss编译后的css文件，注意rgba中逗号后会有一个空格。
        } else {
          red = Math.round(red * (1 - tint) + 255 * tint)
          green = Math.round(green * (1 - tint) + 255 * tint)
          blue = Math.round(blue * (1 - tint) + 255 * tint)
          red = red.toString(16)
          green = green.toString(16)
          blue = blue.toString(16)
          return `${red}${green}${blue}`
        }
      }
      // $button-active使用的这个色
      const shadeColor = (color, shade) => {
        let red = parseInt(color.slice(0, 2), 16)
        let green = parseInt(color.slice(2, 4), 16)
        let blue = parseInt(color.slice(4, 6), 16)
        red = Math.round((1 - shade) * red)
        green = Math.round((1 - shade) * green)
        blue = Math.round((1 - shade) * blue)
        red = red.toString(16)
        green = green.toString(16)
        blue = blue.toString(16)
        return `${red}${green}${blue}`
      }

      const colors = [theme]
      for (let i = 0; i < 10; i++) {
        colors.push(tintColor(theme, i / 10))
      }
      colors.push(shadeColor(theme, 0.1))
      return colors
    },
    // 更新element主题
    updateElementTheme(newTheme) {
      const newColors = this.getColors(newTheme.replace('#', ''))
      let newStyle = this.defaultStyle
      this.defaultColors.forEach((color, index) => {
        newStyle = newStyle.replace(new RegExp(color, 'ig'), newColors[index])
      })
      document.head.querySelector('#elementTheme').innerText = newStyle
    },
    // 更新自己书写的css的主题
    updateCustomTheme(newTheme) {
      const newColors = this.getColors(newTheme.replace('#', ''))
      const rootStyle = document.documentElement.style
      newColors.forEach((color, index) => {
        if (index === 0) {
          rootStyle.setProperty('--theme', `#${color}`)
          return
        }
        if (index === 11) {
          rootStyle.setProperty('--theme-shade', `#${color}`)
          return
        }
        if (index >= 2) {
          rootStyle.setProperty(`--theme-white__${index - 1}`, `#${color}`)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.theme-setting {
  .el-color-dropdown__value,
  .el-color-dropdown__link-btn {
    display: none;
  }
}
</style>
